<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>

<script>
    document.querySelector('#ajaxButton').onclick = function () {
        makeRequest('test.html');
    };

    var httpRequest = new XMLHttpRequest();

    function makeRequest(url) {
        // make the request
        httpRequest.open('GET', url);
        httpRequest.send();
        // listen for the response
        // call alertContents function after we receive server response
        httpRequest.onreadystatechange = alertContents;
    }
    
    function alertContents() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                alert(httpRequest.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
</script>
</body>
</html>